<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>母校行管理员系统 - 队伍详情</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="css/main.css">
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<div id="app">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <div class="text-primary text-2xl font-bold flex items-center">
                    <i class="fa fa-graduation-cap mr-2"></i>
                    <span>母校行活动管理系统</span>
                </div>
            </div>

            <div class="flex items-center gap-6">
                <div class="flex items-center gap-2">
                    <div class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center text-sm">
                        Q
                    </div>
                    <span class="text-sm font-medium">{{ currentUser.name }}（{{ currentUser.role }}）</span>
                    <i class="fa fa-chevron-down text-xs text-gray-500"></i>
                </div>

                <a href="#" class="text-gray-600 hover:text-primary transition-colors btn-back">
                    <i class="fa fa-home mr-1"></i>返回门户
                </a>
            </div>
        </div>
    </header>

    <!-- 面包屑导航 - 实现页面间的层级关系 -->
    <div class="bg-white border-b border-gray-200 px-4 py-2">
        <div class="container mx-auto text-sm text-gray-500">
            <a href="index.html" class="hover:text-primary">母校队伍管理</a>
            <i class="fa fa-angle-right mx-2 text-xs"></i>
            <span class="text-gray-800">队伍详情</span>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="flex flex-1 overflow-hidden">
        <!-- 左侧导航 - 与原界面保持一致 -->
        <aside class="w-64 bg-primary text-white flex-shrink-0 hidden md:block">
            <nav class="py-4">
                <a href="index.html" class="sidebar-item">
                    <i class="fa fa-tasks w-5 text-center"></i>
                    <span>母校队伍管理</span>
                </a>
                <a href="summary-review.html" class="sidebar-item">
                    <i class="fa fa-check-square-o w-5 text-center"></i>
                    <span>母校总结审核</span>
                </a>
                <a href="team-review.html" class="sidebar-item active">
                    <i class="fa fa-list-alt w-5 text-center"></i>
                    <span>母校队伍审核</span>
                </a>
                <a href="material-status.html" class="sidebar-item">
                    <i class="fa fa-upload w-5 text-center"></i>
                    <span>队伍上传材料情况</span>
                </a>
                <a href="activity-batches.html" class="sidebar-item">
                    <i class="fa fa-calendar w-5 text-center"></i>
                    <span>母校行活动批次</span>
                </a>

                <div class="mt-8 px-4 pt-4 border-t border-white/20">
                    <h4 class="text-xs uppercase tracking-wider text-gray-300 mb-3">系统管理</h4>
                    <a href="user-management.html" class="sidebar-item py-2 text-sm">
                        <i class="fa fa-user w-5 text-center"></i>
                        <span>用户管理</span>
                    </a>
                    <a href="system-settings.html" class="sidebar-item py-2 text-sm">
                        <i class="fa fa-cog w-5 text-center"></i>
                        <span>系统设置</span>
                    </a>
                </div>
            </nav>
        </aside>

        <!-- 主内容 -->
        <main class="flex-1 overflow-y-auto p-6">
            <!-- 页面标题和操作按钮 -->
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
                <div>
                    <h1 class="text-2xl font-bold text-gray-800">队伍详情</h1>
                    <p class="text-gray-500 mt-1">查看和管理 {{ team.name }} 的详细信息</p>
                </div>

                <div class="flex gap-3">
                    <button class="btn btn-secondary btn-export">
                        <i class="fa fa-download mr-1"></i>导出数据
                    </button>
                    <button class="btn btn-primary btn-edit">
                        <i class="fa fa-pencil mr-1"></i>编辑队伍
                    </button>
                    <button class="btn btn-danger btn-delete">
                        <i class="fa fa-trash mr-1"></i>删除队伍
                    </button>
                </div>
            </div>

            <!-- 队伍基本信息卡片 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <div class="card lg:col-span-2">
                    <div class="p-6 border-b border-gray-100">
                        <h2 class="font-bold text-gray-800 flex items-center">
                            <i class="fa fa-info-circle text-primary mr-2"></i>
                            队伍基本信息
                        </h2>
                    </div>

                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <p class="text-sm text-gray-500 mb-1">队伍名称</p>
                                <p class="font-medium">{{ team.name }}</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-1">所属高中</p>
                                <p class="font-medium">{{ team.highSchool }}</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-1">队长姓名</p>
                                <p class="font-medium">{{ team.leaderName }}</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-1">所属批次</p>
                                <p class="font-medium">{{ team.batch }}</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-1">所属学院</p>
                                <p class="font-medium">{{ team.college }}</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-1">队员人数</p>
                                <p class="font-medium">{{ team.memberCount }}人</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-1">联系电话</p>
                                <p class="font-medium">{{ team.contact }}</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-1">创建时间</p>
                                <p class="font-medium">{{ team.createTime }}</p>
                            </div>

                            <div class="md:col-span-2">
                                <p class="text-sm text-gray-500 mb-1">活动计划</p>
                                <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                                    <p>{{ team.plan }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 审核状态卡片 -->
                <div class="card">
                    <div class="p-6 border-b border-gray-100">
                        <h2 class="font-bold text-gray-800 flex items-center">
                            <i class="fa fa-check-circle text-primary mr-2"></i>
                            审核状态
                        </h2>
                    </div>

                    <div class="p-6">
                        <div class="flex items-center justify-center py-4">
                            <div class="text-center">
                                <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-yellow-100 text-yellow-500 mb-3">
                                    <i class="fa fa-clock-o text-3xl"></i>
                                </div>
                                <h3 class="text-xl font-bold text-gray-800 mb-1">待审核</h3>
                                <p class="text-sm text-gray-500">等待管理员审核</p>
                            </div>
                        </div>

                        <div class="space-y-4">
                            <div>
                                <p class="text-sm text-gray-500 mb-1">提交时间</p>
                                <p class="font-medium">2023/10/27 14:30:22</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-1">上次审核时间</p>
                                <p class="font-medium">未审核</p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-1">审核意见</p>
                                <p class="font-medium">无</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 队员列表 -->
            <div class="card mb-6">
                <div class="p-6 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <h2 class="font-bold text-gray-800 flex items-center">
                        <i class="fa fa-users text-primary mr-2"></i>
                        队员列表
                    </h2>

                    <button class="btn btn-primary btn-add">
                        <i class="fa fa-plus mr-1"></i>添加队员
                    </button>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                        <tr class="bg-gray-50">
                            <th class="px-6 py-3 text-left text-gray-500 font-medium">序号</th>
                            <th class="px-6 py-3 text-left text-gray-500 font-medium">姓名</th>
                            <th class="px-6 py-3 text-left text-gray-500 font-medium">学号</th>
                            <th class="px-6 py-3 text-left text-gray-500 font-medium">学院</th>
                            <th class="px-6 py-3 text-left text-gray-500 font-medium">班级</th>
                            <th class="px-6 py-3 text-left text-gray-500 font-medium">联系电话</th>
                            <th class="px-6 py-3 text-left text-gray-500 font-medium">加入时间</th>
                            <th class="px-6 py-3 text-left text-gray-500 font-medium">操作</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                        <tr v-for="(member, index) in team.members" :key="member.id" class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4">{{ index + 1 }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600">
                                        <i class="fa fa-user"></i>
                                    </div>
                                    <span>{{ member.name }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">{{ member.studentId }}</td>
                            <td class="px-6 py-4">{{ member.college }}</td>
                            <td class="px-6 py-4">{{ member.class }}</td>
                            <td class="px-6 py-4">{{ member.contact }}</td>
                            <td class="px-6 py-4 text-gray-500">{{ member.joinTime }}</td>
                            <td class="px-6 py-4">
                                <div class="flex gap-2">
                                    <button class="text-primary hover:text-primary/80 btn-view" title="查看详情">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button class="text-red-500 hover:text-red-600 btn-remove" title="移除队员">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 材料上传情况 -->
            <div class="card mb-6">
                <div class="p-6 border-b border-gray-100">
                    <h2 class="font-bold text-gray-800 flex items-center">
                        <i class="fa fa-file-text-o text-primary mr-2"></i>
                        材料上传情况
                    </h2>
                </div>

                <div class="p-6">
                    <div class="space-y-6">
                        <div class="material-item bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                <div>
                                    <h4 class="font-medium">活动申请表</h4>
                                    <p class="text-sm text-gray-500 mt-1">文件格式：PDF，大小不超过10MB</p>
                                </div>

                                <div class="flex gap-3">
                                    <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">已上传</span>
                                    <button class="btn btn-secondary btn-download text-sm">
                                        <i class="fa fa-download mr-1"></i>下载
                                    </button>
                                    <button class="btn btn-primary btn-replace text-sm">
                                        <i class="fa fa-refresh mr-1"></i>替换
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="material-item bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                <div>
                                    <h4 class="font-medium">活动策划书</h4>
                                    <p class="text-sm text-gray-500 mt-1">文件格式：PDF，大小不超过10MB</p>
                                </div>

                                <div class="flex gap-3">
                                    <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">已上传</span>
                                    <button class="btn btn-secondary btn-download text-sm">
                                        <i class="fa fa-download mr-1"></i>下载
                                    </button>
                                    <button class="btn btn-primary btn-replace text-sm">
                                        <i class="fa fa-refresh mr-1"></i>替换
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="material-item bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                <div>
                                    <h4 class="font-medium">宣传材料</h4>
                                    <p class="text-sm text-gray-500 mt-1">文件格式：PPT/PPTX，大小不超过20MB</p>
                                </div>

                                <div class="flex gap-3">
                                    <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">未上传</span>
                                    <button class="btn btn-primary btn-upload text-sm">
                                        <i class="fa fa-upload mr-1"></i>上传
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 审核记录 -->
            <div class="card mb-6">
                <div class="p-6 border-b border-gray-100">
                    <h2 class="font-bold text-gray-800 flex items-center">
                        <i class="fa fa-history text-primary mr-2"></i>
                        审核记录
                    </h2>
                </div>

                <div class="p-6">
                    <div class="bg-gray-50 rounded-lg p-8 text-center text-gray-500">
                        <i class="fa fa-clock-o text-4xl mb-3"></i>
                        <p>暂无审核记录</p>
                    </div>
                </div>
            </div>

            <!-- 操作按钮区 - 与原界面的审核流程关联 -->
            <div class="mt-8 flex justify-end gap-4">
                <button class="btn btn-secondary" onclick="window.location.href='index.html'">
                    返回列表
                </button>
                <button class="btn btn-warning">
                    退回修改
                </button>
                <button class="btn btn-primary">
                    通过审核
                </button>
            </div>
        </main>
    </div>
</div>

<!-- 引入交互脚本 -->
<script src="team-detail.js"></script>
</body>
</html>
